<template>
  <div class="fix-all remark rel" v-gesture:touchstart.stop.prevent="transformIsShowRemark()">
    <div class="remark-content divtcvma"v-gesture:touchstart.stop.prevent="writeRemark()">
      <input @blur="blurInput($event)"  id="input_remark" type="text" maxlength="50"  placeholder='输入备注内容' v-model="remarkMsg"><span v-gesture:touchstart.stop.prevent="emptyRemark()" class="icon-cross-empty divvma">确定</span>
    </div>
  </div>
</template>


<script type="text/javascript">
  export default{
    ready: function(){
      document.getElementById('input_remark').focus();
      this.oldRemark = this.remarkMsg;
    },
    data: function(){
      return {
        oldRemark: ""
      }
    },
    props: {
      isShowRemark: {
        require: true
      },
      remarkMsg: {
        require: true
      }
    },
    methods: {
      transformIsShowRemark: function(e){
        this.remarkMsg = this.oldRemark;
        this.isShowRemark = !this.isShowRemark;
      },
      writeRemark: function(){

      },
      emptyRemark: function(){
        this.isShowRemark = !this.isShowRemark;
      },
      blurInput: function(e){
        this.remarkMsg = this.oldRemark;
        this.isShowRemark = !this.isShowRemark;
      }
    }
  }
</script>


<style lang='sass'>
  @import '../assets/sass/global/themes.scss';
  .remark{background: rgba(0, 0, 0, 0.3);}
  .remark-content{background: white;border-radius:6px;top: 60%;}
  .remark-content input{width: 8rem;border: none;height: 50px;padding: 0 66px 0 15px;border-radius: 50px;box-sizing:border-box;}
  .remark-content .icon-cross-empty{right: 12px;color: $font-color-primary;font-size: 14px;padding: 4px 0 4px 12px;border-left: 1px solid #e3e3e3;}
</style>

<!-- $('#phone').bind('focus',function(){
            $('.bottom_fix').css('position','static');
            //或者$('#viewport').height($(window).height()+'px');
        }).bind('blur',function(){
            $('.bottom_fix').css({'position':'fixed','bottom':'0'});
            //或者$('#viewport').height('auto');
        });   -->
